<template>
  <div class="addBrand-container">
    <div class="container">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        :inline="false"
        class="demo-ruleForm"
      >
        <el-form-item
          label="姓名:"
          prop="name"
        >
          <el-input
            v-model="ruleForm.name"
            placeholder="销售人员姓名"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item
          label="账号:"
          prop="account"
        >
          <el-input
            v-model.number="ruleForm.account"
            placeholder="账号"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item
          label="密码:"
          prop="password"
        >
          <el-input
            type="password"
            v-model="ruleForm.password"
            placeholder="请输入密码"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item
          label="确认密码:"
          prop="checkPassword"
        >
          <el-input
            type="password"
            v-model="ruleForm.checkPassword"
            placeholder="确认密码"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item
          label="帐号状态:"
          prop="status"
        >
          <el-radio-group v-model="ruleForm.status">
            <el-radio label="启用"></el-radio>
            <el-radio label="禁用"></el-radio>
          </el-radio-group>
        </el-form-item>
        <div
          class="subBox"
          style="margin-right: 180px;"
        >
          <el-form-item>
            <el-button
              style="color:black !important"
              @click="goBack"
            >
              取消
            </el-button>
            <el-button
              type="primary"
              @click="submitForm('ruleForm', false)"
            >
              保存
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>
  
<script>
import ResizeMixin from '@/layout/mixin/ResizeHandler'
import { addSeller, resetPassword } from "@/api/seller";
export default {
  name: 'SellerAdd',
  mixins: [ResizeMixin],
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPassword !== '') {
          this.$refs.ruleForm.validateField('checkPassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        name: '',
        account: '',
        password: '',
        checkPassword: '',
        status: '启用'
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        account: [{ required: true, message: '请输入账号', 'trigger': 'blur' }, { type: 'number', message: '账户必须为数字值' }],
        password: [{ required: true, validator: validatePass, 'trigger': 'blur' }],
        checkPassword: [{ required: true, validator: validatePass2, 'trigger': 'blur' }]
      }
    }
  },
  methods: {
    handleClickOutside () {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    },
    goBack () {
      this.$router.push({ path: '/seller' })
    },
    submitForm (formName, st) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let id = this.$route.query.id
          if (id != undefined) {
            resetPassword(id).then(res => {
              console.log(res);
            })
            this.$message.success('重置成功！')
          } else {
            let seller = {name:this.ruleForm.name,account:this.ruleForm.account+"",password:this.ruleForm.password,role:1,status:this.ruleForm.status==='启用'?1:0}
            console.log(seller);
            addSeller(seller).then(res => {
              console.log(res);
            })
            this.$message.success('添加成功！')
          }
          this.goBack()
        } else {
          return false;
        }
      });
    }
  }
}
</script>
  
<style scoped>
.addBrand-container{
    min-height: 90vh;
  height: 100%;
  background-color: white;
  margin: 1.25rem;
  padding: 1.25rem;
  border-radius: 5px;
}
.el-form >>> .subBox{
  margin: 0 !important;
}
</style>